<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id='root'>
        stop:
       <div>
           <div @click="hand1">
               {{count}} 
                <button @click.stop="handleButton">button</button>
            </div>
        </div>
        <hr>    
        self:
        <div>
            <div @click.self="hand1">
                {{count}} 
                 <button @click="handleButton">button</button>
             </div>
         </div>
         <pre>
            修饰符。prevent：阻止默认行为。
            修饰符。capture：把事件的运行模式 变成捕获。捕获是从外到内。冒泡是从内到外。
            修饰符。once：事件绑定只执行一次。
            修饰符。passive：提升scroll滚动的性能。
        </pre>
        <hr>
        按键修饰符：
        <input type="text" @keydown.enter="handleButton">
        <pre>按键修饰符：tab、delete、esc、up、down、left、right</pre>
        <hr>
        鼠标修饰符:
        <pre>鼠标修饰符：left、right、middle</pre>
        <div @click.right='handleButton'>点击右键</div>
        <hr>
        精确修饰符:
        <pre>如果想单独ctrl才行，按着其他的不能触发，就得需要exact修饰。</pre>
        <div @click.ctrl.exact='handleButton'>exact精准修饰符</div>
        <hr>
        其他修饰符：
        <pre>
        修饰符。lazy：我鼠标在输入的时候不变，但是等input失去焦点的时候才变化
        修饰符。number：让类型也变成number
        修饰符 trim：去除输入内容前后的空格，让你输入。但是存储的值里面前后没有空格。
        </pre>

    
    </div>
    <script>
        let app = Vue.createApp({
            data() {
                return {
                    count:0
                }
            },
            methods:{
                handleButton(){
                   alert(1)
                },
                hadlevent(event){
                    console.log(event.target)
                },
                hadlevent2(argm1,event){
                    console.log('argm1',argm1);
                    console.log(event.target);
                },
                hand1(){
                    alert('hand1')
                },
                hand2(){
                    alert('hand2')
                }
            }
        })

        let vm = app.mount('#root')
    </script>
</body>
</html>